import React from 'react'
import { connect } from 'react-redux'
import Styled from 'styled-components'
import { projectLabelView as projectDuck } from 'ducks'
import { Table, Icon, Label } from 'semantic-ui-react'

const TagLabel = ({ color }) => (
  <Label
    style={{ minWidth: '1.0em', minHeight: '1.0em', backgroundColor: color }}
    size="small"
    circular
  />
)

const StyledColumn = Styled(Table.Cell)`
  padding-left: .5em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
`

const StyledColumnPointer = Styled(Table.Cell)`
  padding-left: .5em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
  cursor: pointer;
`

const StyledColumnNum = Styled(Table.Cell)`
  padding-left: .0em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
  cursor: pointer;
`

const LabelRow = ({
  tagObject, value, actionEditTagStart, actionDoAndUpdate, actionTagChange,
}) => {
  const cname = 'label-row'
  return (
    <Table.Row className={cname}>
      <StyledColumnPointer
        collapsing
        width={1}
        onClick={() => actionEditTagStart(tagObject, value[tagObject.name])}
      >
        <TagLabel color={tagObject.config.color} />
      </StyledColumnPointer>
      <StyledColumnPointer
        collapsing
        width={6}
        onClick={() => actionEditTagStart(tagObject, value[tagObject.name])}
      >
        {tagObject.name}
      </StyledColumnPointer>
      <StyledColumnPointer
        width={6}
        collapsing
        onClick={() => actionEditTagStart(tagObject, value[tagObject.name])}
      >
        {value[tagObject.name]}
      </StyledColumnPointer>
      <StyledColumn collapsing textAlign="right">
        <Icon
          className="label-left-hidden-icon"
          name="eraser"
          onClick={() => actionDoAndUpdate(null, actionTagChange, tagObject.name)}
        />
      </StyledColumn>
    </Table.Row>
  )
}

const mapStateToProps = (state, ownProps) => ({
  tagObject: projectDuck.selectors.tag(state, ownProps.tag),
  classes: projectDuck.selectors.classes(state),
  editLabelId: projectDuck.selectors.editLabelId(state),
})

const mapDispatchToProps = {
  actionEditTagStart: projectDuck.creators.actionEditTagStart,
  actionDoAndUpdate: projectDuck.creators.actionDoAndUpdate,
  actionTagChange: projectDuck.creators.actionTagChange,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LabelRow)
